<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高端无线降噪耳机 - 商品详情</title>
    <link rel="stylesheet" href="../css/index-clear.css">
    <link rel="stylesheet" href="../css/index-top.css">
    <link rel="stylesheet" href="../css/goods-detail.css">
    <link rel="stylesheet" href="../css/policy-footer.css">
    <style>
        /* 图片显示区域 */
        .big_show {
            width: 400px;
            height: 400px;
            border: 1px solid blue;
            /* 盒子外面的部分不可见 */
            overflow: hidden;
            /* 绝对定位，距离页面左边300像素 */
            position: absolute;
            top: 120px;
            left: 600px;
            /* 将其隐藏 */
            display: none;
            background-color: aliceblue;
        }

        /* 为大图片设置样式 */
        .big_show img {
            position: absolute;
            width: 800px;
            height: 800px;
        }

        /* 为遮罩层设置样式 */
        .mask {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            /* 先将其隐藏起来 */
            background-color: rgba(red, green, blue, 0.7);
            display: none;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="top-center">
            <div class="top-center-left">
            </div>
            <div class="top-center-right">
                <a href="购物车.html" class="shopping-cart">我的购物车</a>
                <a href="../index.html">返回首页</a>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- 导航 -->
        <div class="breadcrumb">
            <a href="#">首页</a> &gt;
            <a href="#">耳机</a> &gt;
            <span>高端无线降噪耳机</span>
        </div>

        <!-- 商品信息区域 -->
        <div class="product-info">
            <!-- 商品图片 -->
            <div class="product-images">
                <!-- 小图 -->
                <div class="product-images-v"><img src="../images/goods-detail/view.jpg" alt="高端无线降噪耳机主图"
                        class="main-image" id="mainImage"></div>
                <!-- 遮罩层 -->
                <div class="mask"></div>
                <!-- 图片放大区域 -->
                <div class="thumbnail-container">
                    <img src="../images/goods-detail/front.jpg" alt="耳机正面图" class="thumbnail active"
                        data-img="../images/goods-detail/front.jpg">
                    <img src="../images/goods-detail/view.jpg" alt="耳机侧面图" class="thumbnail"
                        data-img="../images/goods-detail/view.jpg">
                    <img src="../images/goods-detail/left.jpg" alt="耳机背面图" class="thumbnail"
                        data-img="../images/goods-detail/left.jpg">
                    <img src="../images/goods-detail/right.jpg" alt="耳机背面2" class="thumbnail"
                        data-img="../images/goods-detail/right.jpg">
                </div>
            </div>
            <div class="big_show">
                <!-- 大图 -->
                <img src="../images/goods-detail/front-2.png">
            </div>
            <!-- 商品详情 -->
            <div class="product-details">
                <h1 class="product-title">高端无线降噪耳机</h1>
                <p class="product-subtitle">沉浸式聆听体验，智能降噪技术</p>

                <div class="product-price">
                    <span class="price-label">价格：</span>
                    <span class="price-value">¥1,299</span>
                </div>

                <p class="product-desc">
                    这款高端无线降噪耳机采用最新的降噪技术，能够有效隔绝外界噪音，让你沉浸在纯净的音乐世界中。耳机配备高清立体声扬声器，提供出色的音质表现。人体工学设计确保长时间佩戴舒适，内置电池可提供长达30小时的播放时间。
                </p>

                <div class="product-props">
                    <div class="prop-item">
                        <span class="prop-label">颜色：</span>
                        <div class="prop-values">
                            <span class="prop-value selected" data-color="黑色">黑色</span>
                            <span class="prop-value" data-color="白色">白色</span>
                            <span class="prop-value" data-color="银色">银色</span>
                        </div>
                    </div>

                    <div class="prop-item">
                        <span class="prop-label">版本：</span>
                        <div class="prop-values">
                            <span class="prop-value selected" data-version="标准版">标准版</span>
                            <span class="prop-value" data-version="豪华版">豪华版</span>
                        </div>
                    </div>
                </div>

                <div class="quantity-selector">
                    <span class="quantity-label">数量：</span>
                    <div class="quantity-control">
                        <button class="quantity-btn" id="decreaseBtn">-</button>
                        <input type="number" class="quantity-input" id="quantity" value="1" min="1">
                        <button class="quantity-btn" id="increaseBtn">+</button>
                    </div>
                </div>

                <div class="action-buttons">
                    <button class="btn btn-primary" id="addToCartBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="21" r="1"></circle>
                            <circle cx="20" cy="21" r="1"></circle>
                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                        </svg>
                        加入购物车
                    </button>
                    <button class="btn btn-secondary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path
                                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                        立即购买
                    </button>
                </div>
            </div>
        </div>

        <!-- 商品特性 -->
        <div class="product-features">
            <h2 class="features-title">产品特性</h2>
            <div class="features-list">
                <div class="feature-item">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9z"></path>
                            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                        </svg>
                    </div>
                    <div class="feature-text">主动降噪技术，有效隔绝环境噪音</div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
                            <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                            <line x1="12" y1="19" x2="12" y2="15"></line>
                        </svg>
                    </div>
                    <div class="feature-text">30小时超长续航，单次充电持久使用</div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15a2 2 0 0 0-2-2H7l-4 4 4 4h12a2 2 0 0 0 2-2v-4z"></path>
                        </svg>
                    </div>
                    <div class="feature-text">高清通话麦克风，语音通话清晰自然</div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                        </svg>
                    </div>
                    <div class="feature-text">人体工学设计，长时间佩戴舒适无负担</div>
                </div>
            </div>
        </div>

        <!-- 商品规格 -->
        <div class="product-specs">
            <h2 class="specs-title">技术规格</h2>
            <div class="specs-content">
                <table class="specs-table">
                    <tr>
                        <th>尺寸</th>
                        <td>180mm × 170mm × 80mm</td>
                    </tr>
                    <tr>
                        <th>重量</th>
                        <td>240g</td>
                    </tr>
                    <tr>
                        <th>驱动单元</th>
                        <td>40mm动态驱动单元</td>
                    </tr>
                    <tr>
                        <th>频率响应</th>
                        <td>20Hz - 40kHz</td>
                    </tr>
                    <tr>
                        <th>降噪深度</th>
                        <td>最高35dB</td>
                    </tr>
                    <tr>
                        <th>蓝牙版本</th>
                        <td>蓝牙5.2</td>
                    </tr>
                    <tr>
                        <th>防水等级</th>
                        <td>IPX4</td>
                    </tr>
                    <tr>
                        <th>充电时间</th>
                        <td>约2小时</td>
                    </tr>
                    <tr>
                        <th>续航时间</th>
                        <td>30小时（降噪关闭）/ 24小时（降噪开启）</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- 购物车通知 -->
    <div class="cart-notification" id="cartNotification">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="9" cy="21" r="1"></circle>
            <circle cx="20" cy="21" r="1"></circle>
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
        </svg>
        <span>已成功添加到购物车！</span>
    </div>

    <script src="js/goods-detail.js"></script>

    <script>
        //1、获取页面中的元素
        let preview = document.querySelector(".product-images-v");//获取预览区
        let mask = document.querySelector(".mask");//获取遮罩层
        let big_show = document.querySelector(".big_show");//获取显示区
        let big_img = big_show.querySelector("img");//获取大图片
        preview.onmousemove = function (e) {//当鼠标在预览区移动时
            mask.style.display = "block";//显示遮罩层
            big_show.style.display = "block";//显示图片显示区
            //鼠标在盒子中的横坐标=鼠标在页面中的横坐标-预览区在页面中的横坐标
            //然后鼠标在盒子中的横坐标需要赋值给遮罩层在预览区中的横坐标，这时鼠标的位置正好对应遮罩层最左边
            //为了让鼠标显示在遮罩层的中心，遮罩层在预览区中的横坐标需要再减去1/2遮罩层的宽度
            //遮罩层在预览区的横坐标=鼠标在页面中的坐标-预览区对页面坐标的偏移量-
            let x = e.pageX - preview.offsetLeft - mask.offsetWidth / 2 - 90;
            //纵坐标与横坐标原理相同
            let y = e.pageY - preview.offsetTop - mask.offsetHeight / 2 - 45;
            // let y = e.clientY - preview.getBoundingClientRect().top - mask.offsetHeight / 2;

            //获取遮罩层最大的移动距离，最大移动距离不超过图片预览区域
            //（这是一个固定的数字）水平最大移动距离=预览区的宽度-遮罩层的宽度
            let x_max = preview.offsetWidth - mask.offsetWidth;
            //（这时一个固定的数字）垂直最大移动距离=预览区的高度-遮罩层的高度
            let y_max = preview.offsetHeight - mask.offsetHeight;
            //根据最大移动距离限制遮罩层水平方向的移动范围
            if (x < 0) {//如果遮罩层在左侧要移出预览区
                x = 0;//让遮罩层的横坐标为0，无法出去
            } else if (x > x_max) {//如果遮罩层最右侧要移出预览区
                x = x_max;//遮罩层的横坐标恒为最大移动距离
            }
            //根据最大移动距离限制遮罩层垂直方向的移动范围
            if (y < 0) {//如果遮罩层在上方要移出预览区
                y = 0;//让遮罩层的纵坐标恒为0，无法移出
            } else if (y > y_max) {//如果遮罩层在下方要移出预览区
                y = y_max;//让遮罩层的纵坐标恒为最大值
            }
            //将计算好的遮罩层的坐标x和y赋值给遮罩层，让其跟随鼠标进行移动
            mask.style.left = x + "px";
            mask.style.top = y + "px";
            //遮罩层的坐标比整个预览区的宽度，得到两个比值，该比值是移动距离的比值
            let x_pro = x / preview.offsetWidth;
            let y_pro = y / preview.offsetHeight;
            //大图片的移动距离=移动距离的比值×大图片的宽高
            let x_big = x_pro * big_img.offsetWidth;
            let y_big = y_pro * big_img.offsetHeight;
            //由于图片显示区域是固定不变的，是大图片的位置在改变
            //当遮罩层在预览区向右移动一段距离，那么大图片在显示区必须向左移动一定比例的距离
            //这样才能显示在显示区域(big_show)中，因此为大图片的移动距离赋值时
            //需要将大图片的移动距离变成负值
            big_img.style.left = -x_big + "px";
            big_img.style.top = -y_big + "px";
        }
        //给预览区注册鼠标移开事件
        preview.onmouseleave = function () {
            mask.style.display = "none";//遮罩层隐藏
            big_show.style.display = "none";//图片显示区域隐藏
        }

    </script>

    <footer>
        <div class="footer-container">
            <!-- 公司信息 -->
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>我们致力于提供高质量的产品和服务，满足客户的需求。</p>
                <div class="social-links">
                    <a href="#" title="微博"><span class="icon icon-weibo"></span></a>
                    <a href="#" title="微信"><span class="icon icon-wechat"></span></a>
                    <a href="#" title="Twitter"><span class="icon icon-twitter"></span></a>
                    <a href="#" title="LinkedIn"><span class="icon icon-linkedin"></span></a>
                </div>
            </div>

            <!-- 快速链接 -->
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>

            <!-- 联系方式 -->
            <div class="footer-section">
                <h3>联系方式</h3>
                <ul>
                    <li><span class="icon icon-map-marker"></span>美国白宫大厦A座1001室</li>
                    <li><span class="icon icon-phone"></span>400-123-4567</li>
                    <li><span class="icon icon-envelope"></span>特朗普@关税double.com</li>
                </ul>
            </div>

            <!-- 法律信息 -->
            <div class="footer-section">
                <h3>法律信息</h3>
                <ul>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">Cookie政策</a></li>
                    <li><a href="#">法律声明</a></li>
                </ul>
            </div>
        </div>

        <div class="copyright">
            <p>&copy; 2025 美国退堂鼓信息技术有限公司. 保留所有权利.</p>
        </div>
    </footer>
</body>

</html>